// 1
@mixin border-stroke($val) {
    @if $val == light {
        border: 1px solid black;
    }
    @else if $val == medium {
        border: 3px solid black;
    }
    @else if $val == heavy {
        border: 6px solid black;
    }
    @else {
        border: none;
    }
}

// 2
@for $i from 1 through 5 {
    .text-#{$i} {
        font-size: #{$i * 15}px;
    }
}

// 3
$colors: (blue, black, red);
@each $color in $colors {
    .#{$color}-bg {
        background-color: #{$color};
    }
}

// 4
$i: 1;
@while $i < 6 {
    .text-#{$i} {
        font-size: #{$i * 15}px;
    }
    $i: $i + 1;
}

// 5
h3{
    text-align: center;
  }
  .info{
    width: 200px;
    border: 1px solid black;
    margin: 0 auto;
  }

  .info-important {
    @extend .info;
    background-color: magenta;
  }